<template>
    <div id="index">
        <div class="card" v-if="flag.receipt == 1">
            <div class="card-header cardActive" @click="cardClick(0)">
                {{$t('home.asn')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon homeCon-active">
                <v-inbound></v-inbound>
            </div>
        </div>
        <div class="card" v-if="flag.orders == 1">
            <div class="card-header" @click="cardClick(1)">
              {{$t('home.outorder')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon">
                <v-outbound></v-outbound>
            </div>
        </div>
        <div class="card" v-if="flag.taskdetail == 1">
            <div class="card-header" @click="cardClick(2)">
              {{$t('home.task')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon">
                <v-task></v-task>
            </div>
        </div>
        <div class="card" v-if="flag.wave == 1">
            <div class="card-header" @click="cardClick(3)">
              {{$t('home.wave')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon">
                <v-wave></v-wave>
            </div>
        </div>
        <div class="card" v-if="flag.transfer == 1">
            <div class="card-header" @click="cardClick(4)">
              {{$t('home.transmit')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon">
                <v-transfer></v-transfer>
            </div>
        </div>
        <div class="card">
            <div class="card-header" @click="cardClick(5)">
              {{$t('home.test')}}
                <i class="icondown el-icon-arrow-down"></i>
                <i class="iconup el-icon-arrow-up"></i>
            </div>
            <div class="homeCon">
                <el-button @click="goTestGrid">{{$t('home.page')}}</el-button>
                <el-button @click="goBtnPermission">{{$t('home.btnAuth')}}</el-button>
                <el-button @click="goMenuPermission">{{$t('home.menuAuth')}}</el-button>
                <el-button @click="goTableConfig">{{$t('home.table1')}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import outbound from "./outbound/outbound"
import inbound from "./inbound/inbound"
import task from "./task/task"
import wave from "./wave/wave";
import transfer from "./transfer/transfer";
import efficiency from "./efficiency/efficiency"

export default {
    name: "index",
    data() {
        return {
            flag: {}
        }
    },
    methods: {
        cardClick(id) {
            let card_header = document.querySelectorAll(".card-header");
            let homeCon = document.querySelectorAll(".homeCon");
            card_header.forEach(item => {
                item.classList.remove("cardActive");
            })
            homeCon.forEach(item => {
                item.classList.remove("homeCon-active");
            })
            card_header[id].classList.add("cardActive");
            homeCon[id].classList.add("homeCon-active");
        },
        goTestGrid() {
            this.$router.push({ name: "testGrid" });
        },
        goBtnPermission() {
            this.$router.push({ name: "buttonPermission" });
        },
        goMenuPermission() {
            this.$router.push({ name: "menuPermission" });
        },
        goTableConfig() {
            this.$router.push({ name: "tableConfigList" });
        }
    },
    mounted() {
        this.$api.get(`/permission/queryRtxWork/${Cookies.get('user')}`).then((res) => {
            
                this.flag = res.bean;
            
        }).catch((e) => {
            this.$message.error(e)
        })

    },
    components: {
        "v-outbound": outbound,
        "v-inbound": inbound,
        "v-task": task,
        "v-wave": wave,
        "v-transfer": transfer,
        "v-efficiency": efficiency
    }
}
</script>

<style scoped>
#index {
    /*width: 100%;*/
    /*height: 100%;*/
    /*padding: 10px;*/
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*justify-content: left;*/
}

.con {
    /*float: left;*/
    width: 49%;
    height: 52%;
    /*border: 1px solid #e0e0e0;*/
    padding: 6px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.card {
    height: auto;
    border: 2px solid #e0e6ed;
    border-radius: 6px;
    margin-bottom: 4px;

}

.card-header {
    color: #888ea8;
    padding: 6px 26px;
    transition: 0.5s;
}

.homeCon {
    transition: 0.5s;
}

.icondown {
    float: right;
    font-size: 20px;
}

.iconup {
    float: right;
    font-size: 20px;
    display: none;
}

.cardActive {
    font-weight: 600;
    color: #409EFF;
}

.cardActive .icondown {
    display: none;
}

.cardActive .iconup {
    display: block;
}

.homeCon {
    height: 0;
    overflow: hidden;
}

.homeCon-active {
    height: 453px;
    padding: 10px;
}
</style>
